<script type="text/javascript">
var usergroup_edit;
var usergroup_delete;
$(document).ready(function(){
/* Start Variable Declaration */
    var usergroup_source;
    var usergroup_adapter;
    var usergroup_buttonAdd;
    var usergroup_searchField;
    var usergroup_grid=$('#usergroup_grid');
    
/* Grid And Toolbar Declaration */
    usergroup_source={
        url : 'index.php/c_usergroup/get_list',
        datatype : 'json',
        root : 'results',
		data : {search_text : ''},
        datafields : [
            { name : 'usergroup_id' },
            { name : 'usergroup_nama' },
            { name : 'usergroup_keterangan' },
            { name : 'usergroup_aktif', type : 'boolean' }
        ],
        beforeprocessing : function(data){
            usergroup_source.totalrecords = data[0].total;
        },
		addrow: function (rowid, rowdata, position, commit) {
			commit(true);
		},
		updaterow: function (rowid, rowdata, commit) {
			var params=JSON.stringify(rowdata);
			$.ajax({
				url : 'c_usergroup/save',
				method : 'post',
				data : {params:params},
				success : function(response){
					var res = $.parseJSON(response);
					usergroup_grid.jqxGrid('updatebounddata');
					$.global_show_notif(MSAVE_SUCCESS,'success');
				}
			});
			commit(true);
		}
    }
    usergroup_adapter = new $.jqx.dataAdapter(usergroup_source);
    
	usergroup_buttonAdd = $("<button style='margin-left: 5px;'><img src='assets/images/icons/add.png'> Tambah Data</button>");
    usergroup_buttonAdd.jqxButton({ width : 120 });
    usergroup_buttonAdd.bind('click', usergroup_btnAdd_click);
    usergroup_searchField = $('<input type="text" class="inputfield" name="usergroup_search" placeholder="Pencarian">');
    usergroup_searchField.jqxInput({ theme : global_theme });
    usergroup_grid.jqxGrid({
        source : usergroup_adapter,
        width : '100%',
        theme : global_theme,
        pagesize : 15,
        pagesizeoptions : [15],
        sortable : true,
		pageable: true,
        filterable : true,
        columnsresize : true,
        autoheight : true,
        virtualmode : true,
        showtoolbar: true,
		editable: true,
		selectionmode: 'singlerow',
		editmode: 'selectedrow',
		altrows: true,
        rendertoolbar: function (toolbar) {
            var me = this;
            var container = $("<div style='margin: 5px;'></div>");
            container.append(usergroup_buttonAdd);
            container.append(' | ');
            container.append(usergroup_searchField);
            toolbar.append(container);
        },
        rendergridrows : function(){
            return usergroup_adapter.records;
        },
        columns : [
            { text : 'Id', dataField : 'usergroup_id', hidden : true, columntype: 'textbox' },
            { text : 'Nama', dataField : 'usergroup_nama', columntype: 'textbox', validation: fpublic_emptyValidation },
            { text : 'Keterangan', dataField : 'usergroup_keterangan', columntype: 'textbox' },
            { text : 'Aktif', dataField : 'usergroup_aktif', columntype: 'checkbox', width : 50 },
			{ text : '&nbsp;', width: 30, editable: false, cellsrenderer : function(row){
					return '<img src="assets/images/icons/edit.png" onClick="usergroup_edit(event, ' + row + ')" title="Ubah Data" style="margin:2px 7px 2px 7px;"/>';
				}
			},
			{ text : '&nbsp;', width: 30, editable: false, cellsrenderer : function(row){
					var record = usergroup_grid.jqxGrid('getrowdata', row);
					var id = record.usergroup_id;
					return '<img src="assets/images/icons/delete.png" id="usergroupdelbtn_' + id + '" onClick="usergroup_delete(event, ' + id + ')" title="Hapus Data" style="margin:2px 7px 2px 7px;"/>';
				}
			}
        ]
    });
/* Function Declaration */
	function usergroup_btnAdd_click(){
		var rowid = usergroup_grid.jqxGrid('getdatainformation').rowscount + 1;
		var row = {};
		row['usergroup_id']=0;
		row['usergroup_nama']='';
		row['usergroup_keterangan']='';
		row['usergroup_aktif']=1;
		var commit = usergroup_grid.jqxGrid('addrow',rowid, row, 'top');
		usergroup_grid.jqxGrid('selectrow', 0);
		usergroup_grid.jqxGrid('beginrowedit', 0);
		$('#textboxeditorusergroup_gridusergroup_nama').focus();
	}
	usergroup_edit = function(e, row_index){
		usergroup_grid.jqxGrid('beginrowedit', row_index);
	}
	usergroup_delete = function(e, usergroup_id){
		$.global_show_confirm('Peringatan',MCONFIRM_DELETE_MASTER);
		$("#confirm_window_ok").unbind('click').click(function(){
			var process = $.global_show_processing();
			$.ajax({
				url : 'c_usergroup/delete',
				method : 'post',
				data : {usergroup_id:usergroup_id},
				success : function(response){
					process.hide();
					var res = $.parseJSON(response);
					usergroup_grid.jqxGrid('updatebounddata');
					$.global_show_notif(MSAVE_SUCCESS,'success');
				}
			});
			return false;
		});
	};
	usergroup_searchField.on('keydown', function(e){
		if(e.keyCode == 13){
			usergroup_source['data']['search_text'] = $(this).val();
			usergroup_grid.jqxGrid('gotopage',0);
			usergroup_grid.jqxGrid('updatebounddata');
		}
	});
});
</script>
<div>
    <div id="usergroup_grid"></div>
</div>